<template>
  <div class="app-container home">
    <searchForm
      class="searchMain"
      size="medium"
      :isHandle="isHandle"
      :label-width="labelWidth"
      :label-position="labelPosition"
      :search-data="searchData"
      :search-form="searchForm"
      :search-handle="searchHandle"
    ></searchForm>
    <tableForm
      :columObj="columObj"
      :pageObj="pageObj"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <template v-slot:operation="scopeVal">
        <el-button type="text" size="small" @click="edit(scopeVal.scope.row)"
          >更新</el-button
        >
        <el-button type="text" size="small" @click="detail(scopeVal.scope.row)"
          >详情</el-button
        >
      </template>
    </tableForm>

    <!-- 弹框 -->
    <baseDialog
      :popObj="popObj"
      @cancelPop="cancelPop"
      @confirmPop="confirmPop"
    >
      <baseForm
        ref="addForm"
        :source="addFormData"
        :config="addConfig()"
        :rules="addFormRules"
      >
      </baseForm>
    </baseDialog>
  </div>
</template>
      
    <script>
import tableForm from "../../components/baseTable/index.vue";
import searchForm from "../../components/baseSearchForm/index.vue";
import baseForm from "../../components/baseForm/index.vue";
import baseDialog from "../../components/baseDialog/index.vue";
import { listManager } from "@/api/manager";

export default {
  name: "Index",
  components: {
    tableForm,
    searchForm,
    baseForm,
    baseDialog,
  },
  data() {
    return {
      isHandle: true,
      labelWidth: "100px",
      labelPosition: "right",
      name: "砂墩子",
      searchData: {
        // 查询参数
        name: "",
        dataTime: [
          new Date(new Date().getFullYear(), new Date().getMonth(), 1),
          new Date(),
        ],
      },
      searchForm: [
        {
          type: "Input",
          label: "矿：",
          prop: "mine",
          placeholder: "请输入",
        },
        {
          type: "Input",
          label: "矿长：",
          prop: "manager",
          placeholder: "请输入",
        },
        // {
        //   type: "daterange",
        //   label: "日期：",
        //   prop: "dataTime",
        //   placeholder: "请选择",
        // },
      ],
      searchHandle: [
        {
          label: "新增",
          type: "plain",
          icon: "el-icon-plus",
          handle: this.newlyForm,
        },
        {
          label: "查询",
          type: "primary",
          icon: "el-icon-search",
          handle: this.handleSearch,
        },
        {
          label: "导出",
          type: "primary",
          icon: "el-icon-download",
          handle: this.handleSearch,
        },
      ],
      columObj: {
        // 选择框
        loading: false, //是否加载
        isSerial: true, //是否需要序列
        isSelect: false, //是否需要复选框
        isPagination: true, //是否需要分页
        isOperation: true, //是否需要操作栏
        tableData: [], //表格数据来源
        tableCol: [
          {
            label: "姓名",
            prop: "name",
            // width:60
          },
          {
            label: "性别",
            prop: "sex",
            // width:60
          },
          {
            label: "身份证号",
            prop: "id",
            // width:170
          },
          {
            label: "联系方式",
            prop: "contactNum",
            // width:120
          },
          {
            label: "学历",
            prop: "record",
            // width:80
          },
          {
            label: "所属矿",
            prop: "mine",
            // width:150
          },
          {
            label: "职称",
            prop: "professional",
            // width:60
          },
          {
            label: "任免文件号",
            prop: "fileNumber",
            // width:120
          },
          {
            label: "历任任职单位及职务",
            prop: "previousPositions",
          },
          {
            label: "累计计分",
            prop: "score",
            width: 80,
          },
        ],
      },
      pageObj: {
        //分页对象
        total: 0,
        pageData: {
          pageNum: 1,
          pageSize: 13,
        },
      },
      popObj: {
        popName: "addFOrm",
        dialogTitle: "更新",
        dialogVisible: false,
        popupWidth: "800px",
        showFooter: true,
      },
      addFormData: {
        name: "",
        sex: "",
        id: "",
        contactNum: "",
        record: "",
        mine: "",
        professional: "",
        fileNumber: "",
        previousPositions: "",
        score: "",
      },
      addFormRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        id: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            pattern:
              /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "证件号码格式有误！",
            trigger: "blur",
          },
        ],
        contactNum: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            message: "联系方式格式有误！",
            trigger: "blur",
          },
        ],
        record: [{ required: true, message: "请输入学历", trigger: "blur" }],
        mine: [{ required: true, message: "请输入所属矿", trigger: "blur" }],
        professional: [
          { required: true, message: "请输入职称", trigger: "blur" },
        ],
        fileNumber: [
          { required: true, message: "请输入职称", trigger: "blur" },
        ],
        previousPositions: [
          {
            required: true,
            message: "请输入历任任职单位及职务",
            trigger: "blur",
          },
        ],
        score: [{ required: true, message: "请输入累计计分", trigger: "blur" }],
      },

      addConfig() {
        return [
          {
            key: "name",
            label: "姓名：",
            component: "el-input",
            span: 12,
            props: {
              placeholder: "请输入姓名",
              clearable: true,
            },
            tips: "<template slot='append'>.com</template>",
          },
          {
            key: "sex",
            label: "性别：",
            component: "el-input",
            span: 12,
            props: {
              placeholder: "请输入矿",
              clearable: true,
              // suffixIcon:"el-icon-date",
            },
          },
          {
            key: "id",
            label: "身份证号码",
            component: "el-input",
            span: 12,
            props: {
              placeholder: "请输入身份证号码",
              clearable: true,
            },
          },
          {
            key: "contactNum",
            label: "联系方式",
            component: "el-input",
            span: 12,
            props: {
              placeholder: "请输入联系方式",
              clearable: true,
            },
          },
          {
            key: "record",
            label: "学历",
            component: "el-input",
            span: 12,
            props: {
              placeholder: "请输入学历",
              clearable: true,
            },
          },
          {
            key: "mine",
            label: "所属矿:",
            component: "el-input",
            span: 12,
            props: {
              placeholder: "请输入所属矿",
              clearable: true,
            },
          },
          {
            key: "professional",
            label: "职称:",
            component: "el-input",
            span: 12,
            props: {
              placeholder: "请输入职称",
              clearable: true,
            },
          },
          {
            key: "fileNumber",
            label: "任免文件号:",
            component: "el-input",
            span: 12,
            props: {
              placeholder: "请输入任免文件号",
              clearable: true,
            },
          },
          {
            key: "previousPositions",
            label: "历任任职单位及职务:",
            component: "el-input",
            span: 12,
            props: {
              placeholder: "请输入历任任职单位及职务",
              clearable: true,
            },
          },
          {
            key: "score",
            label: "累计计分:",
            component: "el-input",
            span: 12,
            props: {
              placeholder: "请输入累计计分",
              clearable: true,
            },
          },
        ];
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 获取数据列表
    getList() {
      console.log("121212" + this.pageObj.pageData.pageNum +  this.pageObj.pageData.pageSize);
      try {
        let params = {
          pageNum: this.pageObj.pageData.pageNum,
          pageSize: this.pageObj.pageData.pageSize,
        };
        listManager(params).then((res) => {
          console.log("121212" + res);
        });
      } catch (error) {
        console.log(error);
      }
      // this.columObj.tableData = [
      //   {
      //     name: "张三",
      //     sex:'男',
      //     id:'620121199809071429',
      //     contactNum:17792788121,
      //     record:'本科',
      //     mine:'砂墩子',
      //     professional:'矿长',
      //     fileNumber:'656555555',
      //     previousPositions:'新疆崔家沟煤矿：矿长/袁大滩煤矿：矿长',
      //     score:'6分'
      //   },
      // ];
    },
    resetSearchForm() {
      console.log(this.$data.searchForm);
      Object.assign(this.$data.searchForm, this.$options.data().searchForm);
    },
    resetAddForm() {
      Object.assign(this.$data.addFormData, this.$options.data().addFormData);
    },
    handleCurrentChange(val) {
      this.pageObj.pageData.pageNum = val;
      this.getList();
    },
    //条数变化
    handleSizeChange(val) {
      this.pageObj.pageData.pageSize = val;
      this.pageObj.pageNum = 1;
      this.getList();
    },
    edit() {
      this.popObj.dialogTitle = "更新";
      this.popObj.dialogVisible = true;
      this.resetAddForm();
    },
    detail() {
      this.popObj.dialogTitle = "详情";
      this.popObj.dialogVisible = true;
      this.resetAddForm();
    },
    cancelPop() {
      this.popObj.dialogVisible = false;
      console.log(this);
      this.$refs.addForm.$refs.form.resetFields();
      this.$refs.addForm.clearValidate();
    },
    async confirmPop() {
      const valid = await this.$refs.addForm.validate();
      console.log(valid);
    },
    handleSearch() {
      this.pageObj.pageData.pageNum = 1;
    },
    newlyForm() {
      this.popObj.dialogTitle = "新增";
      this.popObj.dialogVisible = true;
    },
  },
};
</script>
      
      <style scoped lang="scss">
</style>
      
      